<template>
	<div>
        <el-row>
            <!--工具条-->
            <el-col :span="22" class="toolbar marginTop20px" id="serachId">
                <el-form :inline="true" :model="filters">
                    <el-form-item style="float:right">
                        <el-button type="primary" size="small" v-on:click="getList">查询</el-button>
                    </el-form-item>
                    <el-form-item style="float:right">
                        <el-input v-model="filters.name" size="small" placeholder="服务方名称"></el-input>
                    </el-form-item>
                    <el-form-item style="float:right">
                        <el-date-picker type="date" size="small" placeholder="结束时间" v-model="filters.endTime" value-format="yyyy-MM-dd" style="width: 100%;" @change="onChange"></el-date-picker>
                    </el-form-item>
                    <el-form-item style="float:right">
                        <el-date-picker type="date" size="small" placeholder="开始时间" v-model="filters.startTime" value-format="yyyy-MM-dd" style="width: 100%;" @change="onChange"></el-date-picker>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row class="tac toolbar">
        <el-col :span="23" class="titleLineSymbolTwo">
            <!--列表-->
            <el-table :data="tableData" highlight-current-row v-loading="listLoading" style="width: 100%;">
                <el-table-column prop="name" label="服务名称" min-width="200">
                </el-table-column>
                <el-table-column prop="type" label="分类名称" min-width="120">
                </el-table-column>
                <el-table-column prop="total" label="总请求数" min-width="120">
                </el-table-column>
                <el-table-column prop="requestTotal" label="请求系统数" min-width="120">
                </el-table-column>
                <el-table-column prop="avg" label="请求频率(日均访问数)" min-width="120">
                </el-table-column>
            </el-table>
        </el-col>
        </el-row>
	</div>
</template>

<script>

	import util from '../api/utils'
	import { invoLog_getServiceFrequencyMonitoring } from '../api/api';

	export default {
		data() {
			return {
				filters: {
                    startTime: '',
                    endTime: '',
                    name:''
				},
				tableData: [],
                listLoading: false,
			}
		},
		methods: {
			handleCurrentPageChange: function (pageNum) {// 翻页动作
                this.pageNum = pageNum;
                this.getList();// 翻页后刷新页面数据
            },
            onChange() {
                let nowDate = Date.parse(new Date());
                if(this.filters.startTime != ''){
                    let startDate = Date.parse(this.filters.startTime);
                    if(startDate > nowDate){
                        this.filters.startTime = util.formatDate.format(new Date(), 'yyyy-MM-dd');
                    }
                    // 30天之前的日期
                    let dayStr = util.formatDate.format(new Date(30*24*60*60*1000), 'yyyy-MM-dd');
                    // 选择的日期
                    let startStr = util.formatDate.format(new Date(startDate), 'yyyy-MM-dd');
                    if(startStr.replace('-','') > dayStr.replace('-','')){
                        //只能查30天内
                        this.filters.startTime = util.formatDate.format(new Date(nowDate - 30*24*60*60*1000), 'yyyy-MM-dd');
                    }
                }
                if(this.filters.endTime != ''){
                    let endDate = Date.parse(this.filters.endTime);
                    if(endDate > nowDate){
                        this.filters.endTime = util.formatDate.format(new Date(), 'yyyy-MM-dd');
                    }
                }
            },
			getList() {
				let params = {
                    startTime: this.filters.startTime,
                    endTime: this.filters.endTime,
                    name:this.filters.name
				};
				this.listLoading = true;
				invoLog_getServiceFrequencyMonitoring(params).then(function(result){
                    this.tableData = result.data.data;
					this.listLoading = false;
				}.bind(this)).catch(function (error) {
					this.listLoading = false;
					console.log(error);
				}.bind(this));
            },
		},
		watch: {
			res1 (val) {
				this.showRes = val;
				console.log(this.showRes);
			},
			resDefault (val) {
				this.showRes = val;
			}
    	},
		mounted() {
			this.getList();
		}
	}

</script>